<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorator="decorator/decorator">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>用户信息显示</title>
<!-- Bootstrap  -->
<link rel="stylesheet" href="css/bootstrap.css"/>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>

</head>
<body>  
 <div layout:fragment="content" th:remove="tag">
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="editUserModalLabel">
			  <div class="modal-dialog">
			    <div class="modal-content">
			      <div class="modal-header">
			        <button type="button" class="close" data-dismiss="modal" aria-label="true">
			         &times;
			       	</button>
			        <h4 class="modal-title" id="editUserModalLabel">
			      		修改用户信息</h4>
			      </div>
			      <div class="modal-body">
			       		<form id = "editUserForm" method="post">
			       		<p><label>用户名：</label><input type="text" name="userName" /></p>
			       		<p><label>密码：</label><input type="text" name="password" /></p>
			       		
			       		</form>    		
			       
			      </div>
			      <div class="modal-footer">
			        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
			         <button id="editUserSaveBtn" type="button" class="btn btn-primary">Save changes</button>
			      </div>
			    </div><!-- /.modal-content -->
			  </div><!-- /.modal-dialog -->
			</div><!-- /.modal -->

<!-- Table goes in the document BODY -->
<table class="hovertable" align="center">
   <tr><td colspan="9" align="center"><h3>用户信息显示</h3></td></tr>
	<tr>
		<th>id</th>
		<th>用户名字</th>
        <th>用户密码</th>
        <th>修改</th>
      
	</tr>
	
	<tr  onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
		<td th:text="${session.ttUserVO.userId}"></td>
		<td th:text="${session.ttUserVO.userName}"></td>
        <td th:text="${session.ttUserVO.password}"></td>     
        <td><input type="button" value="修改" class="edit-user"/></td>      
	</tr>
	
</table>

<script th:src="@{/js/jquery-1.11.1.min.js}" type="text/javascript"></script>
<!-- Bootstrap -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.validate.min.js"></script>
	<script type="text/javascript">
$(document).ready(function(){ 
//点击修改，显示单前菜品的可修改信息
debugger;
$('.edit-user').click(function() {
	//修改user
 	userId = $(this).parent().siblings().eq(0).text();
	$.ajax({ 
		type: 'POST',
		url: '/getUserById',
		data: {
			userId: userId
		}, 
		dataType: "json",
		success: function(data) {				
			$('#editUserForm input[name="userName"]').val(data.userName);
			$('#editUserForm input[name="password"]').val(data.password);
		}
		
	}); 
	/* userName = $(this).parent().siblings().eq(1).text();
	password = $(this).parent().siblings().eq(2).text();
	alert(userName);
	alert(password); */

	$('#editUserModal').modal('show');	
}); 

//保存修改个人信息
$("#editUserSaveBtn").click(function() {
	if($("#editUserForm").valid()) {
		var userName = $('#editUserForm input[name="userName"]').val();
		var password = $('#editUserForm input[name="password"]').val();
		var param ={			
				userId:userId,
				userName:userName,
				password:password
			}		
		$.ajax({
			type : 'POST',
			url:'/editUser',
			contentType : "application/json",
			dataType:"json",
			data: JSON.stringify(param),
			success:function(data){
				if(data.success){
					alert('修改成功!');						
					window.location.reload();
				}else{
					var messageMap = data.messageMap;					
					for(var key in messageMap){
						var value = messageMap[key];
					}
					alert('修改失败');
				}
			}
		})
	}
})
}); 	

</script>
</div>
</body>
</html>